import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment, { isDate } from 'moment';
import router from 'umi/router';
import { Form, Collapse } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTable from '@/components/StandardTable';
import DetailsList from '@/components/DetailsList';
import styles from '@/pages/Detail.less';
import { queryFileList } from '@/utils/common';
import FileReader from '@/components/FileReader';
import { formatFile, formatCodeVal } from '@/pages/Common/common';
import AdSelect from '@/components/AdSelect';

const Panel = Collapse.Panel;

@connect(({ tmsOilCard, loading, common }) => ({
  tmsOilCard,
  loading: loading.effects['tmsOilCard/selectDetails'],
  dictObject: common.dictObject,
}))
@Form.create()
class OilCardDetails extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
      activeKey: ['1', '2'],
    };
  }
  componentDidMount() {
    const { dispatch, dictObject, checkId } = this.props;
    this.queryFileList(checkId);
    if (!dictObject['sale-company']) {
      // 发售公司
      dispatch({
        type: 'common/querytDictByCode',
        payload: { code: 'sale-company' },
      });
    }
    // 流水类型
    this.props.dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'oil-change-type' },
    });
    this.props.dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'currency-type' },
    });
  }

  queryFileList = id => {
    queryFileList({
      props: this.props,
      params: { bizId: id, fileBizType: 'CARD_MANA' },
      callback: data => {
        if (!data) return;
        this.setState({ fileList: data });
      },
    });
  };

  callback = key => {
    this.setState({
      activeKey: key,
    });
  };

  componentWillReceiveProps(nextProps) {
    const {
      tmsOilCard: { selectDetails },
      checkId,
      dictObject,
    } = nextProps;
    if (dictObject['sale-company'] && selectDetails[checkId]) {
      dictObject['sale-company'].map(v => {
        if (v.code === selectDetails[checkId].sellCompanyCode) {
          selectDetails[checkId].sellCompanyCode = v.value;
        }
      });
    }
  }

  columns = [
    {
      title: '单据号',
      dataIndex: 'cardChangeNo',
      fixed: this.props.isMobile ? false : true,
      width: this.props.isMobile ? 'auto' : 150,
    },
    {
      title: '流水金额',
      dataIndex: 'changeMoney',
    },
    {
      title: '币种类型',
      dataIndex: 'currencyType',
      render: text => (
        <AdSelect onlyRead={true} value={text} data={this.props.dictObject['currency-type']} />
      ),
    },
    {
      title: '流水类型',
      dataIndex: 'type',
      render: text => (
        <AdSelect onlyRead={true} value={text} data={this.props.dictObject['oil-change-type']} />
      ),
    },
    {
      title: '附件',
      dataIndex: 'attaQuantity',
      render: (text, record) => (
        <FileReader
          type="list"
          count={text}
          urlType="tms"
          params={{ bizId: record.id, fileBizType: 'OILCARD_PAPERS' }}
        />
      ),
    },
    {
      title: '交易时间',
      dataIndex: 'happenTime',
    },
    {
      title: '交易地点',
      dataIndex: 'locationName',
    },

    {
      title: '备注',
      dataIndex: 'remarks',
    },
  ];

  render() {
    const { fileList } = this.state;

    const {
      form: { getFieldDecorator },
      tmsOilCard: { rechargeList, selectDetails },
      isMobile,
      loading,
      checkId,
      dictObject,
    } = this.props;
   // console.log('油卡详情---checkId',checkId,'dictObject:',dictObject ,'selectDetails',selectDetails)
    const details = selectDetails[checkId];
    const tableData = { list: rechargeList ? rechargeList[checkId] : [] };

    const customPanelStyle = {
      borderRadius: 4,
      marginBottom: 12,
      border: 0,
      overflow: 'hidden',
    };
    const currencyType = details
      ? formatCodeVal(dictObject['currency-type'], details.currencyType)
      : '';
    const cardType = details
    ? formatCodeVal(dictObject['CARD_TYPE'], details.cardType)
    : '';
   // console.log('========,',cardType)
    const fields = [
      { key: 'cardNo', name: '卡号' },
      { key: 'sellCompanyCode', name: '发售公司' },
      { key: 'ownCompanyName', name: '所属公司' },
      { key: cardType,name: '油卡类型', isConst: true},
      { key: 'cartPlateNo', name: '所属车辆' },
      { key: currencyType, name: '币种', isConst: true },
      { key: 'currentMoney', name: '当前金额' },
      { key: 'remarks', name: '备注', isRow: true },
      { key: 'attachments', name: '票据', isRow: true, isFile: fileList },
    ];

    return (
      <div className={styles.CollapseDetails}>
        <Collapse
          activeKey={this.state.activeKey}
          onChange={key => this.callback(key)}
          bordered={false}
        >
          <Panel header="油卡信息" key="1" className={styles.customPanelStyle}>
            <DetailsList
              isMobile={isMobile}
              detilsData={{ fields: fields, value: details, fileList }}
            />
          </Panel>
          <Panel header="充值消费记录" key="2" className={styles.customPanelStyle}>
            <div>
              <StandardTable
                disabledRowSelected={true}
                loading={loading}
                data={tableData}
                scrollY={200}
                columns={this.columns}
                scrollX={1200}
              />
            </div>
          </Panel>
        </Collapse>
      </div>
    );
  }
}
export default OilCardDetails;
